<!--
  用户管理-企业用户-学生风采
 -->
<template>
  <div class="app-container">

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="管理列表" name="1">
        <!-- 搜索工作栏 -->
        <el-form
          ref="queryForm"
          :model="queryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入标题"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="发布状态" prop="status">
            <el-select v-model="queryParams.status" clearable>
              <el-option value="0" label="禁用" />
              <el-option value="1" label="启用" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" prop="creator">
            <el-input
              v-model="queryParams.creator"
              placeholder="请输入创建人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 操作工具栏 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
        </el-row>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="list">
          <el-table-column label="id" align="center" prop="id" />
          <el-table-column label="类型" align="center" prop="abstracts">
            <template slot-scope="scope">
              {{ ['团队采访','风采展示','企业点评',][Number(scope.row.abstracts)] }}
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center" prop="title" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ Number(scope.row.status) !== 1 ? "禁用" : "启用" }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建日期"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="更新日期"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人/更新人" align="center" prop="updater">
            <template slot-scope="scope">
              <span>{{ scope.row.creator || "--" }}/{{
                scope.row.updater || "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-popconfirm
                v-if="Number(scope.row.status) === 1"
                title="确定禁用吗？"
                @confirm="handleEditStatus(scope.row, '0')"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                >禁用</el-button>
              </el-popconfirm>
              <el-popconfirm
                v-if="Number(scope.row.status) === 0"
                title="确定启用吗？"
                @confirm="handleEditStatus(scope.row, '1')"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                >启用</el-button>
              </el-popconfirm>
              <el-popconfirm
                title="确定删除吗？"
                @confirm="handleDelete(scope.row)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="回收站" name="2">
        <el-button
          type="success"
          plain
          icon="el-icon-plus"
          size="mini"
          :disabled="leftMultipleSelection.length === 0"
          style="margin-bottom: 12px;"
          @click="mutilBtnHandle()"
        >批量还原</el-button>
        <el-form
          ref="queryForm2"
          :model="queryParams2"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="queryParams2.title"
              placeholder="请输入标题"
              clearable
              @keyup.enter.native="handleQuery2"
            />
          </el-form-item>
          <el-form-item label="发布状态" prop="status">
            <el-select v-model="queryParams2.status" clearable>
              <el-option value="0" label="禁用" />
              <el-option value="1" label="启用" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作人" prop="updater">
            <el-input
              v-model="queryParams2.updater"
              placeholder="请输入操作人"
              clearable
              @keyup.enter.native="handleQuery2"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery2"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading2" :data="list2" @selection-change="handleLeftChange">
          <el-table-column type="selection" align="center" />
          <el-table-column label="id" align="center" prop="id" />
          <el-table-column label="类型" align="center" prop="abstracts">
            <template slot-scope="scope">
              {{ ['团队采访','风采展示','企业点评',][Number(scope.row.abstracts)] }}
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center" prop="title" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ Number(scope.row.status) !== 1 ? "禁用" : "启用" }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建日期"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="删除日期"
            align="center"
            prop="updateTime"
            sortable
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作人" align="center" prop="updater">
            <template slot-scope="scope">
              <span>{{ scope.row.updater || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row, true)"
              >查看</el-button>
              <el-popconfirm
                title="确定还原吗？"
                @confirm="handleReduction(scope.row)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                >还原</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="total2 > 0"
          :total="total2"
          :page.sync="queryParams2.pageNo"
          :limit.sync="queryParams2.pageSize"
          @pagination="getList2"
        />
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      :title="dialogTitle"
      size="80%"
      :visible.sync="editDialog"
      direction="rtl"
    >
      <el-form
        ref="studentForm"
        :model="studentForm"
        size="small"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="类型" prop="abstracts">
          <el-radio v-model="studentForm.abstracts" label="0" :disabled="isSee">团队采访 </el-radio>
          <el-radio v-model="studentForm.abstracts" label="1" :disabled="isSee">风采展示</el-radio>
          <el-radio v-model="studentForm.abstracts" label="2" :disabled="isSee">企业点评</el-radio>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="studentForm.title"
            style="width: 50%"
            :maxlength="50"
            :disabled="isSee"
            placeholder="请输入标题,50字以内"
            clearable
          />
        </el-form-item>
        <el-form-item label="副标题" prop="subtitle">
          <el-input
            v-model="studentForm.subtitle"
            style="width: 50%"
            :maxlength="50"
            :disabled="isSee"
            placeholder="请输入副标题,50字以内"
            clearable
          />
        </el-form-item>
        <el-form-item label="封面图片" prop="imageUrl">
          <imageUpload
            v-if="!isSee"
            v-model="studentForm.imageUrl"
          />
          <img
            v-else
            v-imgError
            :src="studentForm.imageUrl"
            style="width: 146px; height: 146px"
            alt="封面图片"
          >
        </el-form-item>
        <el-form-item label="视频" prop="videoUrl">
          <FileUpload
            v-if="!isSee"
            v-model="studentForm.videoUrl"
            :is-show-tip="false"
            :limit="1"
            :file-size="2048"
            :only-video="true"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio
            v-model="studentForm.status"
            label="1"
            :disabled="isSee"
          >启用</el-radio>
          <el-radio
            v-model="studentForm.status"
            label="0"
            :disabled="isSee"
          >禁用</el-radio>
        </el-form-item>
        <el-form-item label="内容" prop="context">
          <el-input
            v-model="studentForm.context"
            type="textarea"
            :maxlength="500"
            :disabled="isSee"
            style="width: 600px;"
            :rows="4"
            placeholder="请输入摘要,500字以内"
          />
          <!-- <EditorCom ref="editor" v-model="studentForm.context" /> -->
        </el-form-item>
        <el-form-item>
          <el-button @click="closeCheckDialog">取 消</el-button>
          <el-button v-if="!isSee" type="primary" @click="submitCheck">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getStudent,
  createStudent,
  deleteStudent,
  updateStudent,
  recoveryStudentShowPage,
  updateBatchRecoveryStudentShow
} from '@/api/school-admin-api/platform/index.js'
import ImageUpload from '@/components/ImageUpload'
import FileUpload from '@/components/FileUpload'
import { deepClone } from '@/utils'
import EditorCom from '@/components/Editor/newEdit.vue'

export default {
  name: 'Company',
  components: {
    ImageUpload,
    FileUpload,
    EditorCom
  },
  data() {
    return {
      dialogTitle: '',
      leftMultipleSelection: [],
      editDialog: false,
      // 遮罩层
      loading: true,
      loading2: true,
      activeName: '1',
      // 总条数
      total: 0,
      total2: 0,
      list2: [],
      // 企业管理列表
      list: [],
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        title: null,
        creator: null,
        status: null,
        abstracts: null
      },
      // 查询参数
      queryParams2: {
        pageNo: 1,
        pageSize: 10,
        title: null,
        updater: null,
        status: null
      },
      studentForm: {
        title: '', // 标题
        subtitle: '', // 副标题
        abstracts: '0', // 类型 '0'团队采访、 '1'风采展示、'2'企业点评
        status: '0', // 状态 '1'启用、 '0'禁用
        context: '', // 富文本内容
        videoUrl: '', // 视频地址
        imageUrl: '' // 封面图片地址
      },
      rules: {
        // 表单校验规则
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        status: [
          { required: true, message: '状态不能为空', trigger: 'change' }
        ],
        abstracts: [
          { required: true, message: '类型不能为空', trigger: 'change' }
        ]
        // imageUrl: [
        //   {
        //     required: true,
        //     message: '封面图片不能为空',
        //     trigger: 'change'
        //   }
        // ],
        // context: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      },
      // 当前审核数据
      currentRow: null,
      isEdit: false,
      isSee: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(name) {
      if (this.activeName === '1') {
        this.getList()
      } else {
        this.getList2()
      }
    },
    // 多选还原
    handleLeftChange(val) {
      this.leftMultipleSelection = val
    },
    mutilBtnHandle(e) {
      if (this.leftMultipleSelection.length <= 0) return
      this.$modal
        .confirm(`确认批量还原?`)
        .then(() => {
          this.handleReduction(this.leftMultipleSelection, true)
        })
        .catch(() => {})
    },
    // 还原
    handleReduction(row, isArr = false) {
      let ids = []
      if (isArr) {
        row.forEach(v => {
          ids.push(v.id)
        })
      } else {
        ids = [row.id]
      }
      updateBatchRecoveryStudentShow({ ids }).then(res => {
        if (res.data) {
          this.$message.success('还原成功')
          this.getList2()
        }
      })
    },
    // 编辑
    handleEdit(row, type) {
      this.isEdit = true
      this.isSee = type
      this.currentRow = deepClone(row)
      Object.assign(this.studentForm, this.currentRow)
      this.dialogTitle = `${!type ? '编辑' : '查看'}学生风采`
      this.editDialog = true
    },
    // 删除
    handleDelete(row) {
      deleteStudent(row.id).then((res) => {
        if (res.code === 0 && res.data) {
          this.getList()
          this.$message.success('删除成功')
        }
      })
    },
    // 新增banner
    handleAdd() {
      this.editDialog = true
      this.$nextTick(() => {
        this.$refs.studentForm && this.$refs.studentForm.resetFields()
        this.studentForm = this.$options.data().studentForm
        this.dialogTitle = '新增学生风采'
        this.isEdit = false
      })
    },
    handleEditStatus(row, status) {
      const params = deepClone(row)
      params.status = status
      updateStudent(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.getList()
          this.$message.success('更新成功')
        }
      })
    },
    // 提交banner
    submitCheck() {
      // this.studentForm.context = this.$refs.editor.getValue()
      this.$refs.studentForm.validate((boo) => {
        if (boo) {
          const params = deepClone(this.studentForm)
          if (this.isEdit) {
            updateStudent(params).then((res) => {
              if (res.code === 0 && res.data) {
                this.getList()
                this.$message.success('更新成功')
                this.editDialog = false
              }
            })
          } else {
            // params.status = '1'
            createStudent(params).then((res) => {
              if (res.code === 0 && res.data) {
                this.getList()
                this.$message.success('上传成功')
                this.editDialog = false
              }
            })
          }
        }
      })
    },
    // 关闭审核弹窗
    closeCheckDialog() {
      this.editDialog = false
      this.$refs['studentForm'].resetFields()
    },
    // 请求待审核列表数据
    getList() {
      this.loading = true
      // 处理查询参数
      const params = deepClone(this.queryParams)
      console.log(this.queryParams, '----')
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      // 执行查询
      getStudent(params).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    // 请求学生风采回收站列表数据
    getList2() {
      this.loading2 = true
      // 处理查询参数
      const params = deepClone(this.queryParams2)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      // 执行查询
      recoveryStudentShowPage(params).then((response) => {
        this.list2 = response.data.list
        this.total2 = response.data.total
        this.loading2 = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    // 重制搜索条件
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery2() {
      this.queryParams2.pageNo = 1
      this.getList2()
    },
    // 重制搜索条件
    resetQuery2() {
      this.resetForm('queryForm2')
      this.handleQuery2()
    }
  }
}
</script>
